<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改用户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 表单 -->
    <el-row>
      <el-col :span="8">
        <el-radio-group v-model="labelPosition" size="medium ">
        </el-radio-group>
        <div style="margin: 20px"></div>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          class="form"
        >
          <el-form-item label="用户ID">
            <el-input v-model="form.u_id"></el-input>
          </el-form-item>

          <el-form-item label="用户名称" prop="u_name">
            <el-input v-model="form.u_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="u_pwd">
            <el-input v-model="form.u_pwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit"
              >修改</el-button
            >
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["u_id"],
  data() {
    return {
      labelPosition: "left",
      form: {
        u_name: "",
        u_pwd: "",
        u_id: "",
      },
      rules: {
        u_id: [{ required: true, message: "请填写用户ID", trigger: "blur" }],

        u_name: [
          {
            required: true,
            message: "请填写用户名称",
            trigger: "blur",
          },
        ],
        u_pwd: [
          {
            required: true,
            message: "请填写密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 更新事件
    onSubmit() {
      console.log("submit!", this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let url = "/pet-user/update";
          let params = `u_name=${this.form.u_name}&&u_email=${this.form.u_email}&&u_pwd=${this.form.u_pwd}&&u_id=${this.u_id}`;
          this.axios.post(url, params).then((res) => {
            console.log("修改商家请求", res);
            if (res.data.code == 200) {
              this.$message.success("修改成功");
              this.$router.push("/home/user-list");
            }
          });
        } else {
          this.$message.warning("请完善表单");
        }
      });
    },

    // 查询所有用户信息
    loadUserList() {
      this.axios.get("/pet-user?page=1&pagesize=4").then((res) => {
        console.log("加载用户列表", res);
        this.tableData = res.data.data;
      });
    },
    // 加载当前用户的详细信息,回填表单
    loadUserList(u_id) {
      this.axios.post("/pet-user/u_id", `u_id=${this.u_id}`).then((res) => {
        console.log("加载电影详细信息", res);
        this.form = res.data.data;
      });
    },
  },
  mounted() {
    this.loadUserList();
    console.log(this.u_id);
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
